<script setup lang="ts">
import { ref, reactive } from "vue"
import { usePagination } from "@/hooks/usePagination"
import { getBillCommissionListsApi, getBillCommissionExportApi } from "@/api/billv2"

import dayjs from "dayjs"
const currentDate = dayjs()
const customDateTimeFormat = ref<string>("YYYY-MM")

const dialog = ref(false)
const handleClose = () => {
  cancelForm()
  // drawerRef.value!.close()
  emit("DialogClose", true)
}
const emit = defineEmits(["DialogClose"])
const cancelForm = () => {
  searchData.uid = 0
  searchData.other = ""
  searchData.month = currentDate.format("YYYY-MM")
  searchData.type = ""
  searchData.invoicings = ""
  searchData.checks = ""
  paginationData.currentPage = 1
  paginationData.pageSize = 10
  tableData.value = []
  dialog.value = false
}

const dialogShow = async (row: any) => {
  console.log(row)
  searchData.uid = row.uid
  getTableData()
  dialog.value = true
}
defineExpose({ dialogShow })
const onClick = async () => {
  dialog.value = false
  handleClose()
}

const searchData = reactive({
  checks: "",
  invoicings: "",
  type: "",
  month: currentDate.format("YYYY-MM"),
  other: "",
  uid: 0
})

const onSubmit = () => {
  getTableData()
}

const onExport = () => {
  getBillCommissionExportApi({
    ...searchData
  })
    .then((res: any) => {
      links(res.data.filePath)
    })
    .catch(() => {})
    .finally(() => {})
}
const links = (filePath: string) => {
  const link = document.createElement("a") // 创建一个 a 标签用来模拟点击事件
  link.style.display = "none"
  link.href = filePath
  link.setAttribute("download", "票据管理")
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
// const handleSearch = () => {
//   paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
// }
const tableData = ref<any[]>([])

const getTableData = () => {
  getBillCommissionListsApi({
    pageNum: paginationData.currentPage,
    pageSize: paginationData.pageSize,
    ...searchData
  })
    .then((res: any) => {
      paginationData.total = res.data.total
      tableData.value = res.data.list
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      // loading.value = false
    })
}
</script>

<template>
  <el-dialog v-model="dialog" title="详情" width="80%" destroy-on-close center draggable :before-close="handleClose">
    <div>
      <el-form :inline="true" :model="searchData" class="demo-form-inline">
        <el-form-item label="月份">
          <el-date-picker
            v-model="searchData.month"
            :format="customDateTimeFormat"
            :value-format="customDateTimeFormat"
            type="month"
            placeholder="请选择月份"
            clearable
          />
        </el-form-item>
        <el-form-item label="类别">
          <el-select v-model="searchData.type" placeholder="请选择" clearable>
            <el-option label="入库" value="enter" />
            <el-option label="出库" value="out" />
          </el-select>
        </el-form-item>
        <el-form-item label="先款先票">
          <el-select v-model="searchData.checks" placeholder="请选择" clearable>
            <el-option label="是" value="1" />
            <el-option label="否" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="开票">
          <el-select v-model="searchData.invoicings" placeholder="请选择" clearable>
            <el-option label="是" value="1" />
            <el-option label="否" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="其他">
          <el-select v-model="searchData.other" placeholder="请选择" clearable>
            <el-option label="自己" value="1" />
            <el-option label="同事" value="2" />
            <el-option label="第三方" value="3" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认</el-button>
          <el-button type="primary" @click="onExport">下载</el-button>
        </el-form-item>
      </el-form>
      <el-divider border-style="dotted" />
      <div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="billNo" label="票号" width="100" />
          <el-table-column prop="acceptorName" label="客户" />
          <el-table-column prop="billAmount" label="票面金额(万元)" width="120" />
          <el-table-column prop="expirationDate" label="到期日期" width="100" />
          <el-table-column prop="time" label="时间" width="100" />
          <el-table-column prop="price" label="每十万价格" width="100" />
          <el-table-column prop="discount" label="贴息费" width="100" />
          <el-table-column prop="finally" label="金额" width="100" />
          <el-table-column prop="profit" label="差额" width="100" />
          <el-table-column prop="types" label="类别" width="100" />
        </el-table>
        <div class="pagins">
          <el-pagination
            background
            :layout="paginationData.layout"
            :page-sizes="paginationData.pageSizes"
            :total="paginationData.total"
            :page-size="paginationData.pageSize"
            :currentPage="paginationData.currentPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="onClick">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.pagins {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>
